<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
<link rel="stylesheet" href="/css/eco.css">
<title>Document</title>
</head>
<header>
<div class="logo">
</div>
<div class="menu">
<a href="#main1">
<h2>Главная</h2>
</a>
<a href="#main2">
<h2>Наши номера</h2>
</a>
<a href="#main3">
<h2>Фото</h2>
</a>
<a href="#main6">
<h2>Отзывы</h2>
</a>
<a href="#main5">
<h2>Контакты</h2>
</a>
<a href="#">
<h2>Правила</h2>
</a>
<a href="#mer">
<h2>Наши гости</h2>
</a>
<a href="#footer">
<h2>Забронировать</h2>
</a>
</div>
<ul>
<form>
<input type="submit" name="submit" class="submit" value="Search">
</form>
</ul>
</header>
<body>
<section class="main1">
<div class="otel">
<div class="hot">
<a name="main1"></a>
<div class="zagl">
<h1>Moriarty</a></h1>
<h3>Для тех, кто любит природу</h3><br><br>
<h2>Забронировать: <br> + 8 (800) 535-35-35</h2>
</div>
</div>
</div>
</section>
<section class="main2"><br><br>
<a name="main7"><h1>Наши преимущества</h1></a>
<div class="infografiki">
<div class="info1"><img src="img/chasy.png" alt="">
<h1>Мы работаем 24/7</h1>
<p>Мы рады Вас видеть в нашем уютном и комфортабельном хостеле в
любое время дня и любой день недели</p>
</div>
<div class="info1"><img src="img/doroga.png" alt="">
<h1>В самом центре</h1>
<p>За 5-10 минут пешком можно дойти до ГУМа, ЦУМа, набережной и других популярных мест
</p>
</div>
<div class="info1"><img src="img/gigiena.png" alt="">
<h1>Все, что нужно</h1>
<p>К Вашим услугам: постельное белье с полотенцем, пользование общей кухней, стиральной машиной, утюгом,
феном, компьютером, Wi-Fi</p>
</div>
</div>
</section>
<hr>
<section class="main3"><br><br>
<a name="main3"><h1>Примеры номеров</a></h1><br><br>
<div class="nomera">
<div class="nomer">
<div class="image"><img src="img/1.PNG" alt=""></div>
<div class="text">
<h2>Комната для компании</h2>
<p>Комната для четырех человек. Две двухуровневые кровати. Эту комнату мы называем еще «семейной».
Она может сдаваться и по местам (при отсутствии мест в других комнатах). В комнате есть рабочий
стол, зеркало, диванчик и телевизор.</p>
<button>
<h3>Посмотреть</h3>
</button>
</div>
</div>
<div class="nomer">
<div class="image"><img src="img/2.PNG" alt=""></div>
<div class="text">
<h2>Комната повышенной комфортности</h2>
<p>Комната для одного или двух человек. Двуспальная кровать.
В комнате есть холодильник, микроволновка, чайник, телевизор.
Комната укомплектована раковиной.</p>
<button>
<h3>Посмотреть</h3>
</button>
</div>
</div>
</div>
</section><br>
<hr>
<section class="main4"><br>
<a name="main2"><h1>Наши номера</a></h1><br>
<div id="carouselExample" class="carousel slide">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active"
aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"
aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"
aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="5"
aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="6"
aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="7"
aria-label="Slide 8"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="8"
aria-label="Slide 9"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="9"
aria-label="Slide 10"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="10"
aria-label="Slide 11"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/Фото хостела/1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/5.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/6.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/7.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/9.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/10.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img/Фото хостела/11.jpg" class="d-block w-100" alt="...">
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section><br>
<section class="main5">
<br>
<a name="main5"></a>
<div class="cont">
<h1>Наши контакты</h1>
</div><br><br>
<div class="contacts">
<div class="tel">
<h1>Номер телефона</h1>
<h2>+79823248586</h2>
</div><br>
<div class="email">
<h1>Почтовый адрес</h1>
<h2>ecohotel228@gmail.com</h2>
</div><br>
<div class="ss">
<h1>Ссылки на соц.сети</h1>
<div class="icons">
<img data-cl